{extend name="admin/layout"}
{block name="nav"}
{/block}

{block name="content"}
<div class="content">
    <div class="content-box">
        <div class="top-order">
            <h1 style="font-size:1.25rem;font-weight: 700">{$order_name}</h1>
            <div class="list-order">
                <div style="background-color: rgba(0,0,0,.06)">{if $order_status eq 1} 已付款 {else} 未付款 {/if}</div>
                <div style="background-color: rgba(255,235,120,1)">未发货</div>
            </div>
        </div>
        <div class="order-date">{$created_at} 来自 pay app</div>
        <div class="header-content">
            <div class="header-lf-content">
                <div class="header-box-style">
                    <div>
                        <div class="header-msg">
                            <div style="padding:0 20px;margin-bottom:15px;">
                                <div style="margin-bottom:5px;">
                                    配送方式
                                </div>
                                <div>
                                    无需配送
                                </div>
                            </div>
                            <div class="msg-goods">
                                {volist name="goodsList" id="goods"}
                                <div>
                                    <img src="{$goods['image']}" style="width: 50px; height: 50px;">
                                    <span style="font-weight: 550;width: 200px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">{$goods['name']}</span>
                                    <span style="align-self: center;width: 100px;" >{$currency}{$goods['price']} * {$goods['quantity']}</span>
                                    <span style="align-self: center;">{$goods['price'] * $goods['quantity']}</span>
                                </div>
                                {/volist}
                            </div>
                        </div>
                        <div class="header-msg">
                            <div style="padding-bottom:15px;border-bottom:1px solid rgba(71, 71, 71, .1)">
                                <div style="padding:0 15px;display: flex;justify-content: space-between;">
                                    <div>
                                        小计
                                    </div>
                                    <div>
                                        {$goodsList | count}件商品
                                    </div>
                                    <div>
                                        {$currency}{$subtotal_price}
                                    </div>
                                </div>
                                <div style="padding: 0 15px;display: flex;justify-content:space-between;margin-top:10px;">
                                    <div style="font-weight: 550;">总计</div>
                                    <div>
                                        {$currency}{$total_price}
                                    </div>
                                </div>
                            </div>
                            <div style="padding:20px 15px;display: flex;justify-content: space-between;">
                                <div>已付款</div>
                                <div>
                                    {$currency}{$total_price}
                                </div>
                            </div>
                        </div>
                        <div style="display: flex;justify-content: flex-end;padding-bottom: 10px;">
                            <div class="header-btn">
                                <span>为商品发货</span>
                            </div>
                        </div>
<!--                        时间线-->
                        <div class="header-msg">
                            <div style="padding:0 20px;margin-bottom:15px;">
                                <div class="layui-tab layui-tab-brief">
                                    <ul class="layui-tab-title">
                                        <li class="layui-this">用户日志</li>
                                        <li>支付日志</li>
                                    </ul>
                                    <div class="layui-tab-content" style="overflow-y: scroll;height:390px;">
                                        <div class="layui-tab-item layui-show">
                                            {if count($userLogs) gt 0}
                                            <div class="layui-timeline">
                                                {volist name="userLogs" id="log"}
                                                <div class="layui-timeline-item">
                                                    <i class="layui-icon layui-timeline-axis"></i>
                                                    <div class="layui-timeline-content layui-text">
                                                        <h3 class="layui-timeline-title">{$log['created_at']|date='m月d日 H:i'}</h3>
                                                        <p>
                                                            {$log['logs']}
                                                        </p>
                                                    </div>
                                                </div>
                                                {/volist}
                                                {else}
                                                <p>暂无日志</p>

                                                {/if}

                                            </div>
                                        </div>
                                        <div class="layui-tab-item">
                                            {if count($requestLogs) gt 0}
                                            {volist name="requestLogs" id="vo"}
                                            <div class="layui-timeline">
                                                <div class="layui-timeline-item">
                                                    <i class="layui-icon layui-timeline-axis"></i>
                                                    <div class="layui-timeline-content layui-text">
                                                        <h3 class="layui-timeline-title">{$vo['created_at']|date='m月d日 H:i'}</h3>
                                                        <p>
                                                            <span>---------支付方式: {$vo['pay_method']}--------------</span>
                                                            <pre>
                                                                <?php echo json_encode($vo['params'],JSON_UNESCAPED_UNICODE|JSON_PRETTY_PRINT|JSON_UNESCAPED_SLASHES);?>
                                                            </pre>
                                                        </p>
                                                    </div>
                                                </div>
                                            </div>
                                            {/volist}

                                            {else}
                                                <p>暂无日志</p>
                                            {/if}

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>


                    </div>
                </div>
            </div>
            <div class="header-rg-content">
                <div class="header-box-style" style="font-size: .8125rem;">
                    <div style="font-weight: 550;">
                        备注
                    </div>
                    <div style="margin-top:10px;color:#484848">
                        <div>{if $note} {$note} {else}没有来自客户的备注{/if}</div>
                    </div>
                </div>
                <div class="header-box-style" style="font-size: .8125rem;margin-top:20px;">
                    <div style="font-weight: 550;">
                        渠道信息
                    </div>
                    <div style="margin:10px 0;color:#484848">
                        <div>渠道</div>
                    </div>
                    <div style="line-height: 1.8;">
                        <div>
                            pay app
                        </div>
                        <div>
                            订单 ID
                        </div>
                        <div>
                            {$checkout_id}
                        </div>
                    </div>
                </div>
                <div class="header-box-style" style="font-size: .8125rem;margin-top:20px;">
                    <div style="font-weight: 550;">
                        客户
                    </div>
                    <div style="line-height: 1.8;margin-top:10px">
                        <div style="color:rgba(0, 91, 211, 1);cursor: pointer;">{$customer['first_name']}{$customer['last_name']}</div>
                        <div>1订单</div>
                    </div>
                    <div style="font-weight: 550;margin:10px 0;">
                        联系信息
                    </div>
                    <div style="line-height: 1.8;">
                        <div style="color:rgba(0, 91, 211, 1);cursor: pointer;">{$contact_email}</div>
                    </div>
                    <div style="font-weight: 550;margin:10px 0;">
                        收获地址
                    </div>
                    <div style="line-height: 1.6;">
                        <div>{$shippingAddress['first_name']} {$shippingAddress['last_name']}</div>
                        <div>{$shippingAddress['address1']}</div>
                        <div>{$shippingAddress['city']}</div>
                        <div>{$shippingAddress['province']}</div>
                        <div>{$shippingAddress['zip']} {$shippingAddress['country']}</div>
                        <div>{$shippingAddress['phone']}</div>
                    </div>
                    <div style="font-weight: 550;margin:10px 0;">
                        账单地址
                    </div>
                    <div style="line-height: 1.6;">
                        {if $billingAddress}
                        <div>{$billingAddress['first_name']} {$billingAddress['last_name']}</div>
                        <div>{$billingAddress['address1']}</div>
                        <div>{$billingAddress['city']}</div>
                        <div>{$billingAddress['province']}</div>
                        <div>{$billingAddress['zip']} {$billingAddress['country']}</div>
                        <div>{$billingAddress['phone']}</div>
                        {else}
                        未提供账单地址
                        {/if}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{/block}

{block name="js"}
<script>

    layui.use(function () {
        var dropdown = layui.dropdown;
        // 渲染
        dropdown.render({
            elem: '.demo-dropdown-base', // 绑定元素选择器，此处指向 class 可同时绑定多个元素
            data: [{
                title: 'menu item 1',
                id: 100
            }, {
                title: 'menu item 2',
                id: 101
            }, {
                title: 'menu item 3',
                id: 102
            }],
            click: function (obj) {
                this.elem.find('span').text(obj.title);
            }
        });
    });

</script>


{/block}


